<template>
  <div>
    <c-table
      border
      class="table-sm"
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    queryId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      tableName: 'datum_customer_shareholder_import_detail_view',
      loading: false,

      tableData: [],
      tableCount: 0,
      tableColumns: [
        { attrs: { label: '股东姓名', prop: 'real_name' } },
        { attrs: { label: '身份证号/资格证号码', prop: 'id_card' } },
        { attrs: { label: '出资方式', prop: 'invest_method' } },
        { attrs: { label: '持股比例', prop: 'sh_rate' } },
        { attrs: { label: '联系电话', prop: 'mobile_no' } },
      ],
    }
  },
  computed: {},
  watch: {
    queryId() {
      this.getData()
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    async getData() {
      if (!this.queryId) {
        this.tableData = []
        return
      }

      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, {
          'register_no.eq': this.queryId,
        })
      )
      this.loading = false
      this.tableData = (res && res.data) || []
    },
  },
}
</script>

<style lang="scss" scoped></style>
